<template>
  <div>
    <h2>当前求和为:{{sum}}</h2>
    <h3>当前求和放大10倍为：{{bigSum}}</h3>
    <h3>我在{{school}},学习{{subject}}</h3>
    <h3 style="color: red">Person组件的总人数是：{{personList.length}}</h3>
    <select v-model="n">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="add(n)">+</button>
    <button @click="subtract(n)">-</button>
    <button @click="jiaOdd(n)">当前求和为奇数再加</button>
    <button @click="addWait(n)">等等再加</button>

  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  name: "Count",
  data(){
    return{
      n:1,
    }
  },
  computed:{
    //展开对象  借助mapState生成计算属性，从state中读取数据（对象写法）
    // ...mapState({sum:'sum',school:'school',subject:'subject'}),
    //展开对象  借助mapState生成计算属性，从state中读取数据（数组写法）
    ...mapState('countAbout',['sum','school','subject']),
    ...mapState('personAbout',['personList']),
    //名字不要求写一样  借助GettersState生成计算属性，从state中读取数据（对象写法）
    // ...mapGetters({ddd:'bigSum'}),
    //借助GettersState生成计算属性，从state中读取数据（对象写法） 不过要求名字与getters中的名字一致
    ...mapGetters('countAbout',['bigSum']),
  },
  methods:{
    jiaOdd(){
      this.$store.dispatch('countAbout','jiaOdd',this.n)
    },
    addWait(){
      console.log('ddd');
      this.$store.dispatch('addWait',this.n)
    },
    //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
    ...mapMutations('countAbout',{'add':'JIA',subtract:'JIANG'}),

    //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)  这种数组的方法不能像对象一样修改函数名
    // ...mapMutations(['JIA','JIANG'])

    ...mapActions('countAbout',{jiaOdd:'jiaOdd',addWait:'addWait'})
  }
}
</script>